<template>
	<div class="path-index">
		<Header></Header>
		<section>
			<ul v-if="list.length > 0">
				<li
				 @click="goList(item)"
				 v-for="(item,index) in list"
				 :key="index"
				 >
					<div>
						<span>{{item.name}}</span>
						<span>{{item.phone}}</span>
					</div>
					<div>
						<span class="active" v-if="item.delivery == 1">[默认]</span>
						<span>{{item.path}}</span>
						<span>{{item.detailpath}}</span>
					</div>
				</li>
			</ul>
			<h1 v-else>暂无数据，请添加地址</h1>
			<div class="add-path" @click="goList('add')">添加地址</div>
		</section>
		<Tabbar></Tabbar>
	</div>
</template>

<script>
	import Header from '@/components/path/Header.vue'
	import Tabbar from '@/components/common/Tabbar.vue'
	import http from '@/common/api/request.js'
	import {mapState,mapMutations} from 'vuex'
	import bus from '@/common/bus.js'
	export default{
		data(){
			return{
				pathStatus:false
			}
		},
		components:{
			Header,
			Tabbar
		},
		created(){
			//从订单页面进来的
			if(this.$route.query.type == 'select'){
				this.pathStatus = true;
			}
			
			this.getData();
		},
		computed:{
			...mapState({
				list:state=>state.path.list
			})
		},
		methods:{
			...mapMutations(['INIT_DATA']),
			getData(){
				http.$axios({
					url:'/api/selectAddress',
					method:'POST',
					headers:{
						token:true
					}
				}).then(res=>{
					this.INIT_DATA(res.data);
				})
			},
			goList( option ){
				//this.pathStatus为true，代表从订单页面进入的：选择状态
				if(this.pathStatus){
					bus.$emit('selectPath',JSON.stringify(option));
					this.$router.back();
					return;
				}
				this.$router.push({
					name:'path-list',
					params:{
						// key:option
						key:JSON.stringify(option)
					}
				})
			}
		}
	}
</script>

<style scoped>
	.path-index{
		display: flex;
		flex-direction: column;
		width: 100vw;
		height: 100vh;
		overflow: hidden;
	}
	section{
		display: flex;
		flex-direction: column;
		align-items: center;
		background-color: #f7f7f7;
	}
	section ul{
		width: 100%;
	}
	section ul li{
		padding: 0.266667rem 0.4rem;
		margin: 0.16rem 0;
		background-color: #fff;
	}
	section ul li .active{
		color: #b0352f;
	}
	section ul li span{
		padding-right: 0.4rem;
		font-size: 0.426667rem;
	}
	section .add-path{
		margin-top: 0.8rem;
		width: 3.2rem;
		line-height: 1.066667rem;
		font-size: 0.48rem;
		color: #fff;
		text-align: center;
		background-color: #b0352f;
		border-radius: 0.16rem;
	}
	::v-deep .tabbar{
		border-top: 2px solid #ccc;
	}
</style>
